<!DOCTYPE html>
<html>
	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>无忧体检</title>
		<meta name="description" content="无忧体检">
		<meta name="keywords" content="无忧体检">
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
		<!-- 引入样式 -->

		<link rel="stylesheet" href="css/element-ui.css">
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body class="hold-transition">
		<div id="app">
			<div class="content-header common-search-border1">
				<el-button class="butAdd" @click="handleCreate"><i class="fa fa-plus" aria-hidden="true"></i> 新增疾病</el-button>
			</div>
			<div class="app-container">
				<div class="box common-search-border2">
					<div class="filter-container">
						<!-- 搜索栏 -->
						<el-form :inline="true" :model="requestParameters" ref="requestParameters" class="formInfo" label-width="70px">
							<el-form-item label="疾病名称" prop="name">
								<el-input placeholder="请输入" v-model="requestParameters.name" style="width: 200px;" class="filter-item"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button @click="handleRest">清除</el-button>
								<el-button type="primary" class="butOK" @click="handleSearch">搜索</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
				<div class="box common-table-border" style="margin:8px 0 0;">
					<el-table :data="items" fit highlight-current-row style="width: 100%;">
						<el-table-column label="序号" align="center" width="50px">
							<template slot-scope="scope">
								<span>{{ scope.$index+1 }}</span>
							</template>
						</el-table-column>
						<el-table-column label="疾病名称" align="center">
							<template slot-scope="scope">
								<span class="link-type">{{ scope.row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="易发人群" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.population }}</span>
							</template>
						</el-table-column>
						<el-table-column label="疾病类型" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.type}}</span>
							</template>
						</el-table-column>

						<el-table-column label="注意事项" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.attention }}</span>
							</template>
						</el-table-column>

						<el-table-column label="健康方案" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.healthies[0].name}}</span>
							</template>
						</el-table-column>

						<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="400px">
							<template slot-scope="scope">
								<div class="operation">
									<el-button type="primary" size="mini" @click="handleUpdate(scope.row)"><i class="fa fa-pencil-square-o"
										 aria-hidden="true"></i> 修改
									</el-button>
									<el-button size="mini" type="danger" @click="handleDeleted(scope.row)"><i class="fa fa-trash-o" aria-hidden="true"></i>
										删除
									</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-container">
						<el-pagination class="pagiantion" v-show="pagination.total>0"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
						 :current-page="pagination.pageNum"
					 :page-sizes="[10, 20, 50, 100]"
					:page-size="pagination.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						 :total="pagination.total">
						</el-pagination>
					</div>
				</div>
				<!-- 新增目录弹层 -->
				<el-dialog title="新增疾病" :visible.sync="dialogFormVisible" width="40%" top="8vh">
					<el-form label-width="120px" :model="form" :rules="rules" ref="form">
						<el-form-item label="疾病名称：" prop="name">
							<el-input v-model="form.name" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="易发人群：" prop="population">
							<el-input v-model="form.population"></el-input>
						</el-form-item>
						<el-form-item label="疾病类型：" prop="type">
							<el-input v-model="form.type" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="注意事项：" prop="attention">
							<el-input v-model="form.attention" autocomplete="off"></el-input>

						</el-form-item>
						<el-form-item label="健康方案：" prop="tableData">
									<el-table :data="tableData" style="width: 100%">
										<el-table-column prop="name" label="姓名" width="180">
										</el-table-column>
									</el-table>


						</el-form-item>


					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="handleCancel">取 消</el-button>
						<el-button type="primary" @click="handleConfirm">确 定</el-button>
					</div>
				</el-dialog>
				<!-- end -->
			</div>
		</div>
	</body>
	<!-- 引入组件库 -->
	<script src="js/vue.js"></script>
	<script src="js/element-ui.js"></script>
	<script src="plugins/jquery/dist/jquery.js"></script>
<!--	<script src="js/data.json"></script>-->
	<script src="js/base.js"></script>
	<script src="js/axios-0.18.0.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					pagination: {
						total: 0,
						pageNum: 1,
						pageSize: 10
					},
					loading: false,
					items: [],
					baseData: base,
					requestParameters: {
						name: '',

					},
					dialogFormVisible: false,
					form: {
						id: 0,
						name: '',
						population:'',
						type:'',
						attention:'',
						tableData:[]
					},
					rules: {
						name: [{
							required: true,
							message: '请填写',
							trigger: 'blur'
						}]
					}
				}
			},
			created() {
				this.getList();
			},
			methods: {
				//获取url参数  "sport.html?courseId=" + row.id
				getUrlParam(name) {
					//正则表达式
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
					var r = window.location.search.substr(1).match(reg);
					if (r != null) return unescape(r[2]);
					return null;
				},
				getList() {
					//发送请求
					//学科目录分页列表
					let t = this;

					//var pageNum = t.pagination.pageNum;
					//var pageSize = t.pagination.pageSize;
					// 必传参数
					var pageNum=this.pagination.pageNum;
					var pageSize=this.pagination.pageSize;


					axios.get("/disease/page/"+pageSize+"/"+pageNum+"?query="+this.requestParameters.name).then(res=>{

							t.$message.success("疾病列表加载成功")
							//将获取的数据传给items
						   //获取分页的总记录数
						    this.pagination.total = res.data.data.total;
							this.form.tableData=res.data.data.rows.name;
							t.items = res.data.data.rows;
							t.loading = true;


					})


				},
				// 清除
				handleRest() {
					if (this.$refs['requestParameters']) {
						this.$refs['requestParameters'].resetFields();
					}
				},
				//搜索
				handleSearch() {
					this.getList();
				},
				handleSizeChange(val) {
					this.pagination.pageSize = val;
					this.pagination.pageNum = 1;
					this.getList();
				},
				handleCurrentChange(val) {
					this.pagination.pageNum = val;
					this.getList();
				},
				/*// 学科管理
				goToCourseView() {
					window.location.href = "courseList.html";
				},*/
				// 新增目录
				handleCreate() {
					if (this.$refs['form']) {
						this.$refs['form'].resetFields();
					}
					this.dialogFormVisible = true;
				},
				// 修改目录
				handleUpdate(row) {
					if (this.$refs['form']) {
						this.$refs['form'].resetFields();
					}
					this.form.id = row.id;
					this.form.name = row.name;
					this.form.population=row.population;
					this.form.type=row.type;
					this.form.attention=row.attention
					//this.form.健康方案=row.healthies[0].name
					console.log(this.form);
					this.dialogFormVisible = true;
				},
				handleConfirm() {
					if (!this.form.id) {
						this.handleCreateConfirm();
					} else {
						this.handleUpdateConfirm();
					}
				},
				//新增目录确定
				handleCreateConfirm() {
					this.$refs['form'].validate((valid) => {
						if (valid) {
							let params = this.form;
							console.log("疾病添加请求参数：");
							console.log(params);
							// 发送请求
							axios.post("/disease",params).then(res=>{

									this.$message.success("添加成功");
									this.dialogFormVisible = false;
									this.getList();
							})

						}
					});
				},
				// 修改目录确定
				handleUpdateConfirm() {
					this.$refs['form'].validate((valid) => {
						if (valid) {
							let params = this.form;
							axios.put("/disease",params).then(res=>{
								this.dialogFormVisible = false;
								this.$message.success("学科信息修改成功");
								this.getList()
							})

						}
					});
				},
				// 新增/修改目录取消
				handleCancel() {
					this.dialogFormVisible = false;
				},

				// 删除目录
				handleDeleted(row) {
					var param={id:row.id}
					this.$confirm('此操作将永久删除目录 ' + ', 是否继续?', '提示', {
						type: 'warning'
					}).then(() => {
						axios.delete("/disease/"+row.id).then(res=>{
							this.$message.success("删除成功");
							this.dialogFormVisible=false;
							//删除成功后刷新数据
							this.getList();
						})


					}).catch(() => {
						this.$message.info('已取消操作!')
					});
				}
			}
		})
	</script>
</html>
